
<template>
  <div class="suspension" :style="containerStyle">
    <div class="suspension-wrap" :style="wrapStyle">
      <img
        class="suspension-logo"
        :src="data.image || defaultImage"
        :alt="data.alt || '悬浮图标'"
        @click="handleClick"
      />

      <!-- 悬浮内容 -->
      <div 
        v-if="data.showContent && data.content"
        class="suspension-content"
        :style="contentStyle"
      >
        <div v-html="data.content"></div>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 默认图片
const defaultImage = computed(() => '/src/assets/images/default-suspension.png')

// 计算容器样式
const containerStyle = computed(() => {
  return {
    width: '100%',
    height: `${props.data.size || 36}px`,
    position: 'absolute',
    right: '0',
    top: `${props.data.position || 10}%`,
    zIndex: props.data.zIndex || 999,
    border: 'none',
    boxSizing: 'border-box'
  }
})

// 计算包装器样式
const wrapStyle = computed(() => {
  return {
    width: `${props.data.size || 36}px`,
    height: `${props.data.size || 36}px`,
    position: 'absolute',
    right: `${props.data.right || 30}px`,
    zIndex: props.data.zIndex ? props.data.zIndex + 2 : 1001
  }
})

// 计算内容样式
const contentStyle = computed(() => {
  return {
    position: 'absolute',
    top: `${props.data.size || 36}px`,
    right: '0',
    width: `${props.data.contentWidth || 200}px`,
    backgroundColor: props.data.contentBackgroundColor || '#ffffff',
    border: `1px solid ${props.data.contentBorderColor || '#e4e7ed'}`,
    borderRadius: `${props.data.contentBorderRadius || 4}px`,
    padding: `${props.data.contentPadding || 10}px`,
    boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
    zIndex: props.data.zIndex ? props.data.zIndex + 1 : 1000
  }
})

// 事件处理
function handleClick() {
  emit('click', props.data)
}
</script>

<style lang="scss" scoped>
.suspension {
  width: 100%;
  box-sizing: border-box;

  .suspension-wrap {
    .suspension-logo {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      cursor: pointer;
      object-fit: cover;
    }

    .suspension-content {
      z-index: 1000;
      box-sizing: border-box;

      &::before {
        content: '';
        position: absolute;
        top: -6px;
        right: 10px;
        width: 12px;
        height: 12px;
        background-color: inherit;
        border: inherit;
        border-top: none;
        border-right: none;
        transform: rotate(45deg);
      }
    }
  }
}
</style>
